import { useState } from 'react'

function progressPage(props: any) {

    const [hoverPage, setHoverPage] = useState(0)
    // 最大页
    const maxPage = 185
    // 移入图片
    const onMouseMove = (e: any) => {
        const num = Math.min(e.nativeEvent.offsetX, maxPage)
        const distance = Math.floor(num / (maxPage / props.festivalImgs.length))
        if (distance < 0) {
            setHoverPage(0)
        }
        else if (distance >= props.festivalImgs.length) {
            setHoverPage(props.festivalImgs.length - 1)
        }
        else {
            setHoverPage(distance)
        }
    }
    return (
        <div>
            <div className='labourBox_content_img' onMouseMove={onMouseMove}>
                <div><img src={props.festivalImgs[hoverPage].img} alt="" /> </div>
                <progress value={hoverPage} max={props.festivalImgs.length - 1} />
                <div className='labourBox_content_introduce'>
                    <p> {props.festivalImgs[hoverPage].msg}</p>
                    <b style={{ display: 'block' }}>
                        <span style={{ marginRight: '10px', color: '#ff69b4' }}>{props.festivalImgs[hoverPage].avatar}</span>
                        <span>{props.festivalImgs[hoverPage].title}</span>
                    </b>
                </div>
            </div>
        </div>
    )
}

export default progressPage
